<template>
    <a-layout class="layersty" style="height:100%;">
        <a-layout-content style="order:1" class="defaultContent">
            <rx-layout>
                <div slot="center" :span="24" id="html">
                    <div class="FormPdfHtml" :style="{'width':paper.paperWidth+'mm','height':paper.paperHeight+'mm'}" v-html="pdfHtml">
                    </div>
                </div>
            </rx-layout>

        </a-layout-content>

        <a-layout-footer style="order:0;">
            <a-form class="buttongmodle">
                <a-button-group>
                    <a-button @click="print()">{{$ti18('rxForm.print','打印')}}</a-button>
                </a-button-group>
            </a-form>
        </a-layout-footer>

    </a-layout>
</template>

<script>
    import FormPdfTemplateApi from "@/api/form/core/formPdfTemplate";
    import print from 'print-js';
    import {Util, RxDialog, RxLayout} from "@lowcode/jpaas-common-lib";

    export default {
        name: "FormPdfHtml",
        props: ["pkId", "layerid","lydata", "destroy", "dataJson","metadata","type"],
        components: {
            RxDialog,
            RxLayout,
        },

        data() {
            return {
                pdfHtml: '',
                paper:{
                    paperType:'A4',
                    paperWidth: 210,
                    paperHeight: 297
                },
            }
        },
        created() {
            this.loadData();

        },
        methods: {
            print() {
                var self_ = this;

                printJS({
                    printable: 'html',
                    scanStyles: false,
                    style: '', //传入自定义时的样式
                    type: 'html',
                    targetStyles: ['*'],
                    ignoreElements: ['no-print', 'bc', 'gb']
                })
            },
            loadData() {
                let self_ = this;
                if (!self_.pkId) {
                    return;
                }
                let data = JSON.parse(JSON.stringify(self_.dataJson||self_.lydata.dataJson));
                delete data.initData;
                var values = Object.values(self_.metadata||self_.lydata.metadata);
                let params={pkId: this.pkId, data: JSON.stringify(data),
                    metadata: JSON.stringify(values),type:this.type};
                FormPdfTemplateApi.getTemplate(params).then(res => {
                    var html = res.data.pdfHtml;
                    this.pdfHtml = html;
                    if(res.data.paper){
                        this.paper = JSON.parse(res.data.paper)
                    }
                })
            },
        }

    }
</script>

<style scoped>
    .buttongmodle {
        text-align: right;
    }

    .ant-layout-footer {
        padding: 8px 20px !important;
    }
    .FormPdfHtml{
        margin: auto;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
        padding: 20px;
    }
</style>